<script lang="ts" setup>
import { onMounted, ref } from "vue";
import type { Ebook } from "@/types/ebook";
import { FireTwoTone, EyeOutlined, HeartOutlined, LikeOutlined } from "@ant-design/icons-vue";
import { all } from "@/services/ebook";
import { useGetCategoryListTree } from "@/composables";
import type { MenuProps } from "ant-design-vue";

const listLoading = ref(false);
const isShow = ref(true);
const eookList = ref<Ebook[]>([]);

// composable
const { categoryListTree, getCategoryListTree } = useGetCategoryListTree();

// 处理点击查看该分类下的电子书
const handleClick: MenuProps["onClick"] = async (e) => {
  isShow.value = false;
  const categoryId = e.key;
  if (categoryId === 0) {
    isShow.value = true;
    return;
  }
  listLoading.value = true;
  try {
    const res = await all(Number(categoryId));
    eookList.value = res.content;
  } finally {
    listLoading.value = false;
  }
};

onMounted(async () => {
  await getCategoryListTree();
});
</script>
<template>
  <a-layout>
    <a-layout-sider width="200" style="background: #fff">
      <a-menu mode="inline" @click="handleClick">
        <a-menu-item :key="0"> <FireTwoTone style="margin-right: 8px" />欢迎 </a-menu-item>
        <a-sub-menu v-for="item in categoryListTree" :key="item.id">
          <template #title>
            <span> {{ item.name }}</span>
          </template>
          <a-menu-item v-for="subItem in item.children" :key="subItem.id">
            {{ subItem.name }}
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout-content
      :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <h1 v-if="isShow">欢迎使用lxx知识库</h1>
      <a-list
        v-else
        item-layout="vertical"
        size="large"
        :grid="{ column: 3 }"
        :data-source="eookList"
        :loading="listLoading"
      >
        <template #renderItem="{ item }">
          <a-list-item key="item.id">
            <template #actions>
              <EyeOutlined style="margin-right: -23px" /> {{ item.docCount }}
              <HeartOutlined style="margin-right: -23px" />{{ item.docCount }}
              <LikeOutlined style="margin-right: -23px" />{{ item.docCount }}
            </template>
            <a-list-item-meta :description="item.description">
              <template #title>
                <router-link :to="`/doc?ebookId=${item.id}`">{{ item.name }}</router-link>
              </template>
              <template #avatar><a-avatar :src="item.cover" /></template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-layout-content>
  </a-layout>
</template>
<style scoped>
.ant-avatar {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 8%;
  margin: 30px 0;
}
</style>
